<template>
	<view class="stator-detail-container">
		<!-- 图片区域 -->
		<view class="stator-image-section">
			<u-image :src="statorData.image || defaultImage" width="200rpx" height="200rpx" mode="aspectFit"></u-image>
		</view>

		<!-- 基本信息 -->
		<view class="stator-info-section">
			<view class="form-item">
				<text class="form-label">定子型号</text>
				<text class="form-value">{{ statorData.model || '无' }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">品牌</text>
				<text class="form-value">{{ statorData.brand || '无' }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">规格</text>
				<text class="form-value">{{ statorData.spec || '无' }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">当前库存</text>
				<text class="form-value stock-value">{{ statorData.stock || '0' }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">价格</text>
				<text class="form-value price-value">¥{{ formatPrice(statorData.price) }}</text>
			</view>

			<view class="form-item remark-item">
				<text class="form-label">备注</text>
				<text class="form-value">{{ statorData.remark || '无' }}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="footer-actions">
			<!-- <view class="btn-delete" hover-class="btn-delete-hover" @click="showDeleteConfirm">删除</view>
			<view class="btn-edit" hover-class="btn-edit-hover" @click="editStator">编辑</view> -->
			<view class="btn-pay" hover-class="btn-pay-hover" @click="() => showpay(statorData.price)">支付</view>
		</view>

		<!-- 删除确认弹窗 -->
		<u-modal :show="showDeleteModal" title="删除确认" content="确定要删除该定子吗？" showCancelButton @confirm="confirmDelete"
			@cancel="cancelDelete"></u-modal>

		<!-- 加载中提示 -->
		<u-loading-page :loading="pageLoading" color="#1989fa"></u-loading-page>
	</view>
</template>

<script>
import api from '@/utils/api.js'

export default {
	data() {
		return {
			statorId: null, // 定子ID
			statorData: {}, // 定子数据
			defaultImage: '/static/images/default-goods.png', // 默认图片
			showDeleteModal: false, // 删除确认弹窗
			pageLoading: true, // 页面加载状态
		};
	},
	onLoad(options) {
		console.log('定子详情页参数:', options);

		if (options && options.id) {
			this.statorId = options.id;
			console.log('获取到定子ID:', this.statorId);
			this.fetchStatorDetail();
		} else {
			console.error('缺少定子ID参数');
			uni.showToast({
				title: '缺少定子ID',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	},
	methods: {
		// 支付
		async showpay(price) {
			const res = await api.payMoney()
			wx.requestPayment({
				// appId: res.payMap.appId,
				timeStamp: res.payMap.timeStamp, // 时间戳，从后端获取
				nonceStr: res.payMap.nonceStr, // 随机字符串，从后端获取
				package: res.payMap.package, // 是指定的格式，prepay_id参数值从后端获取
				signType: res.payMap.signType, // 签名算法，应与后端签名算法一致
				paySign: res.payMap.paySign, // 签名，从后端获取
				success(res) {
					// 支付成功的回调
					console.log('支付成功', res);
					// 跳转订单页
					uni.navigateTo({
						url: '/pages/MyOrder/myOrder' // 确认订单页面的路径
					});

				},
				fail(err) {
					// // 支付失败的回调
					// ums.cancelPay({
					// 	outTradeNo: res.outTradeNo
					// })
					// // 跳转订单页
					// uni.navigateTo({
					// 	url: '/pages/MyOrder/myOrder' // 确认订单页面的路径
					// });
					console.log('支付失败', err);
				},
				// complete: () => {
				// 	this.show = false
				// }
			});
			console.log(price)
		},
		// 获取定子详情
		fetchStatorDetail() {
			if (!this.statorId) {
				console.error('定子ID无效');
				uni.showToast({
					title: '定子ID无效',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
				return;
			}

			this.pageLoading = true;
			console.log('正在获取定子详情, ID:', this.statorId);

			api.getCoreDetail(this.statorId).then(res => {
				console.log('获取定子详情成功:', res);

				if (res && typeof res === 'object') {
					// 确保响应数据有id字段
					if (!res.id && this.statorId) {
						res.id = this.statorId;
					}

					this.statorData = res;

					// 设置页面标题
					if (res.model) {
						uni.setNavigationBarTitle({
							title: res.model
						});
					}
				} else {
					console.error('定子详情数据异常:', res);
					uni.showToast({
						title: '定子不存在',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			}).catch(err => {
				console.error('获取定子详情失败:', err);
				uni.showToast({
					title: '获取定子详情失败',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}).finally(() => {
				this.pageLoading = false;
			});
		},

		// 格式化价格
		formatPrice(price) {
			if (price === undefined || price === null || price === '') return '0.00';
			const num = Number(price);
			return isNaN(num) ? '0.00' : num.toFixed(2);
		},

		// 编辑定子
		editStator() {
			// 确保定子ID存在
			if (!this.statorId) {
				uni.showToast({
					title: '定子ID不存在',
					icon: 'none'
				});
				return;
			}

			console.log('跳转编辑页面，ID:', this.statorId);

			uni.navigateTo({
				url: `/pages/stator/stator-edit?id=${this.statorId}`,
				fail: (err) => {
					console.error('跳转到编辑页面失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		},

		// 显示删除确认弹窗
		showDeleteConfirm() {
			this.showDeleteModal = true;
		},

		// 取消删除
		cancelDelete() {
			this.showDeleteModal = false;
		},

		// 确认删除
		confirmDelete() {
			this.showDeleteModal = false;

			if (!this.statorId) {
				uni.showToast({
					title: '定子ID不存在',
					icon: 'none'
				});
				return;
			}

			uni.showLoading({
				title: '删除中...',
				mask: true
			});

			console.log('开始删除定子，ID:', this.statorId);

			// 调用删除API
			api.deleteCore(this.statorId).then(res => {
				console.log('删除定子成功:', res);

				uni.showToast({
					title: '删除成功',
					icon: 'success'
				});

				setTimeout(() => {
					// 返回列表页面并刷新
					uni.navigateBack({
						delta: 1,
						success: () => {
							// 通过事件通知列表页刷新数据
							uni.$emit('refreshStatorList');
						}
					});
				}, 1500);
			}).catch(err => {
				console.error('删除定子失败:', err);
				uni.showToast({
					title: err?.message || '删除失败，请重试',
					icon: 'none'
				});
			}).finally(() => {
				uni.hideLoading();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f7fa;
}

.stator-detail-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding-top: 20rpx;
	padding-bottom: 120rpx;
	position: relative;
}

// 图片区域
.stator-image-section {
	display: flex;
	justify-content: center;
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}

// 定子信息区域
.stator-info-section {
	background-color: #fff;
}

// 表单项样式
.form-item {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	min-height: 80rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;

	.form-label {
		color: #999;
		font-size: 28rpx;
		width: 150rpx;
	}

	.form-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;

		&.price-value {
			color: #fa3534;
			font-weight: 500;
		}

		&.stock-value {
			color: #1989fa;
			font-weight: 500;
		}
	}

	&.remark-item {
		align-items: flex-start;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
}

// 底部按钮
.footer-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	height: 100rpx;

	.btn-delete {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #ff4d4f;
		font-size: 30rpx;
		border-top: 1rpx solid #eee;

		&-hover {
			background-color: #f5f5f5;
		}
	}

	.btn-pay {
		height: 100%;
		text-align: center;
		flex: 1;
		background-color: rgb(231, 66, 66);
		color: white;
	}

	.btn-edit {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #1989fa;
		color: #fff;
		font-size: 30rpx;

		&-hover {
			background-color: #0c76d8;
			opacity: 0.9;
		}
	}
}
</style>